<template>
	<el-table :data="data" height="100%" class="library_table_data">
		<el-table-column label="库名称" min-width="360">
			<div class="table_name" slot-scope="{ row }" @click="handleLookLibrary(row)">
				<img :src="libraryCover(row)" :alt="row.name" />
				<h4>{{ row.name }}</h4>
			</div>
		</el-table-column>
		<el-table-column label="建库人" min-width="120">
			<div class="table_avatar" slot-scope="{ row }">
				<img :src="avatarImage(row)" :alt="row.createName" />
				<h4>{{ row.createName }}</h4>
			</div>
		</el-table-column>
		<el-table-column label="库文件" min-width="120">
			<template slot-scope="{ row }">
				<i class="el-icon-file-count"></i>
				{{ row.diskCount }}个文件
			</template>
		</el-table-column>
		<el-table-column label="更新时间" min-width="160">
			<template slot-scope="{ row }">
				<i class="el-icon-time"></i>
				{{ row.updateTime }}
			</template>
		</el-table-column>
		<el-table-column label="操作" width="48" align="center">
			<template slot-scope="{ row }">
				<slot name="handle" :data="row"></slot>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
export default {
	props: {
		data: { type: Array, default: () => [] }
	},
	methods: {
		handleLookLibrary(data) {
			this.$emit('look', data);
		}
	}
};
</script>

<style lang="scss" scoped>
.library_table_data {
	.table_name {
		float: left;
		display: flex;
		align-items: center;
		cursor: pointer;
		img {
			display: block;
			width: 80px;
			height: 45px;
			object-fit: cover;
			margin-right: 10px;
		}
		h4 {
			font-weight: normal;
			line-height: 20px;
		}
	}
	.table_avatar {
		float: left;
		display: flex;
		align-items: center;
		img {
			display: block;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 10px;
		}
		h4 {
			font-weight: normal;
			line-height: 20px;
		}
	}
}
</style>
